<template>
  <div class="house-container">
    <div class="left">
      <template v-for="item in LinkList">
        <router-link :to="item.path">{{item.title}}</router-link>
      </template>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>
<script lang="ts">
import { DatePicker } from "ant-design-vue";
import { defineComponent, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'

interface StateProps {
  LinkList: any[],
  msg: string,
  title: string
}

export default defineComponent({
  setup(props, context) {

    // 定义 -> 响应式数据  setter getter
    const state:StateProps = reactive({
      LinkList: [], // never[]
      msg: 'success',
      title: '侧边栏'
    })
    const store = useStore();

    setTimeout(() => {
      state.title = '我是侧边栏改变后的数据'

      console.log('')
    }, 2000);

    const child = store.getters.asyncRoutes[0].children
    child.forEach((item:any) => {
      console.log(item, 'item------item')
      state.LinkList.push({
        path: '/layouts/' + item.path,
        title: item.meta.title
      })
    })

    console.log('child:',  state.LinkList)

    // 在setup的return中，不要使用拓展符，
    // 当前的这个对象就会 丢失getter和setter
    // toRefs改变不能在return中使用拓展符
    const { LinkList, msg, title  } = toRefs(state)
    return {
      LinkList,
      msg,
      title
    }
  }
})
</script>
<style lang="scss">
.house-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  .left {
    flex: 3;
    background: #eee;
    a {
      display: block;
      line-height: 60px;
    }
  }
  .right {
    flex: 7;
    background: #ccc;
  }
}
</style>
